<template>
  <layout title="badge角标">
    <layout-content title="基础使用">
      <tn-badge :custom-style="badgeCustomStyle">99+</tn-badge>
      <tn-badge dot :custom-style="badgeCustomStyle">99+</tn-badge>
    </layout-content>

    <layout-content title="设置尺寸">
      <tn-badge size="sm" :custom-style="badgeCustomStyle">99+</tn-badge>
      <tn-badge :custom-style="badgeCustomStyle">99+</tn-badge>
      <tn-badge size="lg" :custom-style="badgeCustomStyle">99+</tn-badge>
      <tn-badge size="xl" :custom-style="badgeCustomStyle">99+</tn-badge>
      <view class="tn-margin-top-sm">
        <tn-badge dot size="sm" :custom-style="badgeCustomStyle">99+</tn-badge>
        <tn-badge dot :custom-style="badgeCustomStyle">99+</tn-badge>
        <tn-badge dot size="lg" :custom-style="badgeCustomStyle">99+</tn-badge>
        <tn-badge dot size="xl" :custom-style="badgeCustomStyle">99+</tn-badge>
      </view>
      <view class="tn-margin-top-sm">
        <tn-badge size="60" :custom-style="badgeCustomStyle">99+</tn-badge>
        <tn-badge size="60" font-bold :custom-style="badgeCustomStyle">99+</tn-badge>
        <tn-badge font-size="30" size="60" font-bold :custom-style="badgeCustomStyle">99+</tn-badge>
        <tn-badge size="60" dot :custom-style="badgeCustomStyle">99+</tn-badge>
      </view>
    </layout-content>

    <layout-content title="设置颜色">
      <tn-badge type="primary" :custom-style="badgeCustomStyle">99+</tn-badge>
      <tn-badge type="success" :custom-style="badgeCustomStyle">99+</tn-badge>
      <tn-badge type="warning" :custom-style="badgeCustomStyle">99+</tn-badge>
      <tn-badge type="danger" :custom-style="badgeCustomStyle">99+</tn-badge>
      <tn-badge type="info" :custom-style="badgeCustomStyle">99+</tn-badge>

      <view class="tn-margin-top-sm">
        <tn-badge bg-color="tn-bg-blue" :custom-style="badgeCustomStyle">99+</tn-badge>
        <tn-badge bg-color="tn-bg-blue--light" color="tn-color-blue" :custom-style="badgeCustomStyle">99+</tn-badge>
        <tn-badge bg-color="tn-cool-bg-6" :custom-style="badgeCustomStyle">99+</tn-badge>
      </view>
    </layout-content>

    <layout-content title="绝对定位">
      <view class="tn-flex-row">
        <view class="badge-container tn-bg-gray--light">
          <tn-badge absolute>99+</tn-badge>
        </view>
        <view class="badge-container tn-bg-gray--light">
          <tn-badge size="sm" absolute :absolute-position="{top: '-6rpx', right: '-6rpx'}">99+</tn-badge>
        </view>
        <view class="badge-container tn-bg-gray--light">
          <tn-badge absolute absolute-center :custom-style="circleBadgeStyle">
            <tn-icon icon="logo-tuniao"></tn-icon>
          </tn-badge>
        </view>
        <view class="badge-container tn-bg-gray--light">
          <tn-badge absolute absolute-center>99+</tn-badge>
        </view>
      </view>
      <view class="tn-flex-row tn-margin-top-sm">
        <view class="badge-container tn-bg-gray--light">
          <tn-badge dot absolute>99+</tn-badge>
        </view>
        <view class="badge-container tn-bg-gray--light">
          <tn-badge dot absolute :absolute-position="{top: '-6rpx', right: '-6rpx'}">99+</tn-badge>
        </view>
        <view class="badge-container tn-bg-gray--light">
          <tn-badge dot absolute absolute-center>99+</tn-badge>
        </view>
      </view>
    </layout-content>

    <layout-content title="使用示例">
      <view class="tn-flex-row tn-flex-center-around tn-col-12">
        <view class="badge-demo">
          <view class="image__wrap">
            <image class="image" src="@/static/favicon.ico"></image>
            <tn-badge absolute absolute-center>V2.0.0</tn-badge>
          </view>
          <view class="title">图鸟UI</view>
        </view>
        <view class="badge-demo">
          <view class="image__wrap">
            <image class="image" src="@/static/favicon.ico"></image>
            <tn-badge absolute absolute-center>V2.0.0</tn-badge>
          </view>
          <view class="title">图鸟UI</view>
        </view>
        <view class="badge-demo">
          <view class="image__wrap">
            <view class="icon">
              <tn-icon icon="menu"></tn-icon>
            </view>
            <tn-badge absolute absolute-center>V2.0.0</tn-badge>
          </view>
          <view class="title">图鸟UI</view>
        </view>
        <view class="badge-demo">
          <view class="image__wrap">
            <view class="icon">
              <tn-icon icon="menu"></tn-icon>
            </view>
            <tn-badge absolute absolute-center>V2.0.0</tn-badge>
          </view>
          <view class="title">图鸟UI</view>
        </view>
      </view>
    </layout-content>
  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { ref, CSSProperties } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnBadge from '@/tuniao-ui/components/tn-badge/src/Badge.vue'
import TnIcon from '@/tuniao-ui/components/tn-icon/src/Icon.vue'

// badge自定义样式
const badgeCustomStyle: CSSProperties = {
  marginRight: '20rpx',
  marginTop: '20rpx',
}

// circleBadge样式
const circleBadgeStyle: CSSProperties = {
  borderRadius: '50%',
  padding: '4rpx'
}

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}
</script>

<style lang="scss" scoped>

.badge-container {
  // 重要设置
  position: relative;
  width: 100rpx;
  height: 100rpx;
  margin-top: 20rpx;
  margin-left: 20rpx;
}

.badge-demo {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .image__wrap {
    position: relative;
    width: 100rpx;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .image {
      width: 90%;
      height: 90%;
    }
    .icon {
      font-size: 60rpx;
    }
  }
}
</style>
